<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<!--在这里写你的css-->
<div th:fragment="stylesheet">

</div>
<body th:fragment="content">
<!--在这里写你的内容-->
<!-- OVERVIEW -->
<div class="panel panel-headline">
    <!-- MULTI CHARTS -->
    <div class="panel">
        <div class="panel-heading">
            <h3 class="panel-title">Projection vs. Realization</h3>
            <div class="right">
                <button type="button" class="btn-toggle-collapse"><i class="lnr lnr-chevron-up"></i></button>
                <button type="button" class="btn-remove"><i class="lnr lnr-cross"></i></button>
            </div>
        </div>
        <div class="panel-body">
            <div id="visits-trends-chart" class="ct-chart"></div>
        </div>
    </div>
    <!-- END MULTI CHARTS -->

</div>
<!-- END OVERVIEW -->



<!-- END FILTER COLUMN -->
</body>
<!--在这里定义或者引用你的script-->

<div th:fragment="script">
    <script>
        $(function() {
            var data, options;

            // visits trend charts
            data = {
                labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
                series: [{
                    name: 'series-real',
                    data: [200, 380, 350, 320, 410, 450, 570, 400, 555, 620, 750, 900],
                }, {
                    name: 'series-projection',
                    data: [240, 350, 360, 380, 400, 450, 480, 523, 555, 600, 700, 800],
                }]
            };

            options = {
                fullWidth: true,
                lineSmooth: false,
                height: "270px",
                low: 0,
                high: 'auto',
                series: {
                    'series-projection': {
                        showArea: true,
                        showPoint: false,
                        showLine: false
                    },
                },
                axisX: {
                    showGrid: false,

                },
                axisY: {
                    showGrid: false,
                    onlyInteger: true,
                    offset: 0,
                },
                chartPadding: {
                    left: 20,
                    right: 20
                }
            };

            new Chartist.Line('#visits-trends-chart', data, options);


        });
    </script>

</div>

</html>